<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/login.css">

    <style type="text/css">
        .header {
            height: 100px;
            width: 100%;
        }
        .footer {
            height: 80px;
        }
        .login-box{
            height: 480px;
        }

    </style>

</head>
<body>
    <div id="wrapper">
        <!--头部-->
        <div class="header" style="overflow: hidden"><img style="clear:both;display:block;margin: auto" src="imgs/header.jpg"><!--<span style="font-size: 60px;"><strong>海洋测绘官方网站</strong></span>--></div>
        <!--登录-->
        <div class="login-box">
            <div class="register">
                <div class="title">
                    <span>登录</span>
                    <a href="register.html">去注册</a>
                </div>
                <form onsubmit="return false">
                    <div class="default">
                        <input id="uname"  type="text" placeholder="用户名/手机" />
                        <span style="color: red" id="namespan"></span>
                    </div>
                    <div class="default">
                        <input id="upwd"  type="password" placeholder="密码"/>
                        <span style="color: red" id="pwdspan"></span>
                    </div>

                    <div class="default">
                        <input id="captcha" class="" required="required" type="text" placeholder="验证码"  />
                        <img id="checkcode" class="" src="/captcha" style="width: 120px;height: 40px" >
                    </div>
                    <div ><span>   </span><br>
                        <span style="color: red"  id="captchaStatus"></span>
                    </div>
                    <div class="">
                        <input id="autoLogin" type="checkbox" ><span>自动登录</span>
                    </div>
                    <div class="submit">
                        <span class="notice">
                            <a href="#">忘记密码</a>
                        </span>
                        <button id="submitBtn" >登录</button>
                    </div>
                </form>
                <div class="other_login">
                    <div class="log">
                        <span>社交账号登录</span>
                    </div>
                    <div class="icon">
                        <ul>
                            <li data-log="icon" class="i_hover">
                                <img data-icon="wx" src="imgs/register/wx.png" alt=""/>
                            </li>
                            <li data-log="icon" class="i_hover">
                                <img data-icon="qq" src="imgs/register/qq.png" alt=""/>
                            </li>
                            <li data-log="icon" class="i_hover">
                                <img data-icon="wb" src="imgs/register/wb.png" alt=""/>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--底部-->
        <div class="footer" style="background-color: #093d8b;text-align: center">
            <span style="font-family: 华文楷体;color: #ffffff">
                copyright © 2011-2020 版权所有 中国人民解放军海军海道测量局<br>
                    建议使用：1024*768，Microsoft IE 6.0以上浏览器
            </span>
        </div>
    </div>

    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
    <script src="plugins/rsa/BigInt.js"></script>
    <script src="plugins/rsa/Barrett.js"></script>
    <script src="plugins/rsa/RSA.js"></script>
    <script type="text/javascript">
        function checkCpatcha(){
            var input = $("#captcha").val();
            if(input==''){
                $("#captchaStatus").text("请输入验证码");
                return false;
            }
            if(input.length!=4){
                $("#captchaStatus").text("请输入4位验证码");
                return false;
            }else{
                $.ajax({
                    url:"/check"
                    ,type:'POST'
                    ,data:{
                        "val":input
                    }
                    ,success:function (r) {
                        if(r==1){
                            $("#captchaStatus").text("");
                        }else{
                            $("#captchaStatus").text("验证码不正确");
                        }
                    }
                })
            }
        }
        $("#uname").focusout(function () {
            if($("#uname").val().trim()==''){
                $("#namespan").text("用户名不能为空")
            }else{
                $("#namespan").text("")
            }
        })
        $("#upwd").focusout(function () {
            if($("#upwd").val().trim()==''){
                $("#pwdspan").text("密码不能为空")
            }else{
                $("#pwdspan").text("")
            }
        })
        $("#captcha").focusout(function () {
            checkCpatcha();
        });
        $("#checkcode").click(function () {
            $("#checkcode").attr('src','/captcha?'+'nocache='+new Date().getTime());
        });
        $("#submitBtn").click(function () {

            if($("#uname").val().trim()==''){
                $("#namespan").text("用户名不能为空")
                return false;
            }
            if($("#upwd").val().trim()==''){
                $("#pwdspan").text("密码不能为空")
                return false;
            }
            var input = $("#captcha").val();
            if(input==''){
                $("#captchaStatus").text("请输入验证码");
                return false;
            }
            if(input.length!=4){
                $("#captchaStatus").text("请输入4位验证码");
                return false;
            }else{
                $.ajax({
                    url:"/check"
                    ,type:'POST'
                    ,data:{
                        "val":input
                    }
                    ,success:function (r) {
                        if(r==1){
                            $("#captchaStatus").text("");
                            $.post("/api/luss/v1/user/getKey",function (r) {
                                var modulus = r.pubmodulus;
                                var exponent = r.pubexponent;
                                setMaxDigits(200);
                                var key = new RSAKeyPair(exponent, "", modulus);
                                var pwd = $("#upwd").val();
                                var encrypedpwd = encryptedString(key,encodeURIComponent(pwd));
                                var autoLogin = $("#autoLogin").is(':checked');
                               if(autoLogin){
                                   var formData = {
                                       "username":$("#uname").val()
                                       ,"pwd":encrypedpwd
                                       ,"autoLogin":"1"
                                   };
                               }else{
                                   var formData = {
                                       "username":$("#uname").val()
                                       ,"pwd":encrypedpwd
                                   };
                               }
                                $.ajax({
                                    url:"/api/luss/v1/user/login"
                                    ,type:'POST'
                                    ,data:formData
                                    ,success:function (r) {
                                        if(r.success){
                                            window.location.href="index.html"
                                        }else{
                                            $("#pwdspan").text("用户名或密码错误");
                                            $("#upwd").val("");
                                            $("#upwd").focus();
                                            return false;
                                        }
                                    }
                                })
                            })
                        }else{
                            $("#captchaStatus").text("验证码不正确");
                        }
                    }
                })
            }
        })
    </script>
</body>
</html>